<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="generator" content="VuePress 2.0.0-beta.53" />
    <meta name="theme" content="VuePress Theme Hope" />
    <link rel="icon" href="/doc/images/favicon.ico"><title>第 2 章 TypeScript 概述 | AT 的文档库</title><meta name="description" content="At 的文档库，好记性不如烂笔头！">
    <style>
      :root {
        --bg-color: #fff;
      }

      html[data-theme="dark"] {
        --bg-color: #1d2025;
      }

      html,
      body {
        background: var(--bg-color);
      }
    </style>
    <script>
      const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
      const systemDarkMode =
        window.matchMedia &&
        window.matchMedia("(prefers-color-scheme: dark)").matches;

      if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
        document.querySelector("html").setAttribute("data-theme", "dark");
      }
    </script>
    <link rel="preload" href="/doc/assets/style.c3a4c10b.css" as="style" /><link rel="stylesheet" href="/doc/assets/style.c3a4c10b.css" />
    <link rel="modulepreload" href="/doc/assets/app.41440b49.js"><link rel="modulepreload" href="/doc/assets/第 2 章 TypeScript 概述.html.76b27e4d.js"><link rel="modulepreload" href="/doc/assets/_plugin-vue_export-helper.cdc0426e.js"><link rel="modulepreload" href="/doc/assets/第 2 章 TypeScript 概述.html.e976154a.js"><link rel="prefetch" href="/doc/assets/index.html.0bcc895f.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.c8df2167.js" as="script" /><link rel="prefetch" href="/doc/assets/Vue2.html.48e096c5.js" as="script" /><link rel="prefetch" href="/doc/assets/Vue3.html.324e646c.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.fb0ad0e0.js" as="script" /><link rel="prefetch" href="/doc/assets/第 1 章 导言.html.d6c662f8.js" as="script" /><link rel="prefetch" href="/doc/assets/第 3 章 类型全解.html.e4f1b931.js" as="script" /><link rel="prefetch" href="/doc/assets/第 4 章 函数.html.701a2968.js" as="script" /><link rel="prefetch" href="/doc/assets/第 5 章 类和接口.html.8988d546.js" as="script" /><link rel="prefetch" href="/doc/assets/第 6 章 类型进阶.html.45b313e3.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.a9dd6465.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.a3374cf8.js" as="script" /><link rel="prefetch" href="/doc/assets/面试题详解.html.c326eaaf.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.88582229.js" as="script" /><link rel="prefetch" href="/doc/assets/常见问题.html.e0f65550.js" as="script" /><link rel="prefetch" href="/doc/assets/扩展使用.html.87cccc41.js" as="script" /><link rel="prefetch" href="/doc/assets/掌握 GIT.html.c150b234.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.a3c2858b.js" as="script" /><link rel="prefetch" href="/doc/assets/面试题详解.html.9a53d157.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.101afd82.js" as="script" /><link rel="prefetch" href="/doc/assets/面试题详解.html.8224e1cd.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.54b5ca2d.js" as="script" /><link rel="prefetch" href="/doc/assets/基础掌握.html.d839cc53.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.80e4d5cc.js" as="script" /><link rel="prefetch" href="/doc/assets/基础掌握.html.9a178a04.js" as="script" /><link rel="prefetch" href="/doc/assets/扩展知识.html.3535ab30.js" as="script" /><link rel="prefetch" href="/doc/assets/项目搭建.html.e926587b.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.881e95b0.js" as="script" /><link rel="prefetch" href="/doc/assets/安装及使用.html.ba7314a3.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.f9509ce0.js" as="script" /><link rel="prefetch" href="/doc/assets/第 1 章.html.726a0bb9.js" as="script" /><link rel="prefetch" href="/doc/assets/第 2 章.html.38f55e7d.js" as="script" /><link rel="prefetch" href="/doc/assets/Controllers.html.6b27764c.js" as="script" /><link rel="prefetch" href="/doc/assets/Module.html.3849b10b.js" as="script" /><link rel="prefetch" href="/doc/assets/Providers.html.7d2793f1.js" as="script" /><link rel="prefetch" href="/doc/assets/404.html.c5de7dd9.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.86b08b0b.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.f4119260.js" as="script" /><link rel="prefetch" href="/doc/assets/Vue2.html.caf7eb18.js" as="script" /><link rel="prefetch" href="/doc/assets/Vue3.html.6dc23cf4.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.868f2c80.js" as="script" /><link rel="prefetch" href="/doc/assets/第 1 章 导言.html.9edf000e.js" as="script" /><link rel="prefetch" href="/doc/assets/第 3 章 类型全解.html.9ad8a3d4.js" as="script" /><link rel="prefetch" href="/doc/assets/第 4 章 函数.html.9115df00.js" as="script" /><link rel="prefetch" href="/doc/assets/第 5 章 类和接口.html.e392a0d1.js" as="script" /><link rel="prefetch" href="/doc/assets/第 6 章 类型进阶.html.1b5b864e.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.e5a75968.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.974654cf.js" as="script" /><link rel="prefetch" href="/doc/assets/面试题详解.html.ed3fa7a3.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.3b9ebcaa.js" as="script" /><link rel="prefetch" href="/doc/assets/常见问题.html.b427e39a.js" as="script" /><link rel="prefetch" href="/doc/assets/扩展使用.html.76b3dd90.js" as="script" /><link rel="prefetch" href="/doc/assets/掌握 GIT.html.724416fc.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.8b55f9ef.js" as="script" /><link rel="prefetch" href="/doc/assets/面试题详解.html.8ee968a7.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.06371751.js" as="script" /><link rel="prefetch" href="/doc/assets/面试题详解.html.6b672044.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.b200eaff.js" as="script" /><link rel="prefetch" href="/doc/assets/基础掌握.html.5135d2c4.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.557b7bf5.js" as="script" /><link rel="prefetch" href="/doc/assets/基础掌握.html.7b535b09.js" as="script" /><link rel="prefetch" href="/doc/assets/扩展知识.html.c6b233af.js" as="script" /><link rel="prefetch" href="/doc/assets/项目搭建.html.450f0b1d.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.6483ed06.js" as="script" /><link rel="prefetch" href="/doc/assets/安装及使用.html.b4d859f3.js" as="script" /><link rel="prefetch" href="/doc/assets/index.html.f15cf3e9.js" as="script" /><link rel="prefetch" href="/doc/assets/第 1 章.html.127b1e7c.js" as="script" /><link rel="prefetch" href="/doc/assets/第 2 章.html.ea8e67e2.js" as="script" /><link rel="prefetch" href="/doc/assets/Controllers.html.029df1e7.js" as="script" /><link rel="prefetch" href="/doc/assets/Module.html.f102db2a.js" as="script" /><link rel="prefetch" href="/doc/assets/Providers.html.9bef3753.js" as="script" /><link rel="prefetch" href="/doc/assets/404.html.2cfd6b20.js" as="script" /><link rel="prefetch" href="/doc/assets/photoswipe.esm.09e03fed.js" as="script" />
  </head>
  <body>
    <div id="app"><!--[--><!--[--><!--[--><span tabindex="-1"></span><a href="#main-content" class="skip-link sr-only">Skip to content</a><!--]--><div class="theme-container has-toc"><!--[--><!--[--><header class="navbar"><div class="navbar-left"><button class="toggle-sidebar-button" title="Toggle Sidebar"><span class="icon"></span></button><!--[--><!----><!--]--><a href="/doc/" class="brand"><!----><!----><span class="site-name">AT 的文档库</span></a><!--[--><!----><!--]--></div><div class="navbar-center"><!--[--><!----><!--]--><nav class="nav-links"><div class="nav-item hide-in-mobile"><a href="/doc/" class="nav-link" aria-label="首页"><!---->首页<!----></a></div><div class="nav-item hide-in-mobile"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="开发问题汇总"><span class="title"><!---->开发问题汇总</span><span class="arrow"></span><ul class="nav-dropdown"><li class="dropdown-item"><a href="/doc/development-question/Vue" class="nav-link" aria-label="Vue"><!---->Vue<!----></a></li></ul></button></div></div><div class="nav-item hide-in-mobile"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="系统笔记"><span class="title"><!---->系统笔记</span><span class="arrow"></span><ul class="nav-dropdown"><li class="dropdown-item"><a href="/doc/sysnotes/Git/%E6%8E%8C%E6%8F%A1%20GIT.html" class="nav-link" aria-label="GIT"><!---->GIT<!----></a></li><li class="dropdown-item"><a href="/doc/sysnotes/Nvm/%E5%AE%89%E8%A3%85%E5%8F%8A%E4%BD%BF%E7%94%A8.html" class="nav-link" aria-label="NVM"><!---->NVM<!----></a></li><li class="dropdown-item"><a href="/doc/sysnotes/Linux/%E5%9F%BA%E7%A1%80%E6%8E%8C%E6%8F%A1.html" class="nav-link" aria-label="Linux"><!---->Linux<!----></a></li><li class="dropdown-item"><a href="/doc/sysnotes/JavaScript" class="nav-link" aria-label="JavaScript"><!---->JavaScript<!----></a></li><li class="dropdown-item"><a href="/doc/sysnotes/CSS" class="nav-link" aria-label="CSS"><!---->CSS<!----></a></li><li class="dropdown-item"><a href="/doc/sysnotes/HTML" class="nav-link" aria-label="HTML"><!---->HTML<!----></a></li></ul></button></div></div><div class="nav-item hide-in-mobile"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="阅读笔记"><span class="title"><!---->阅读笔记</span><span class="arrow"></span><ul class="nav-dropdown"><li class="dropdown-item"><a href="/doc/readbook/《Vue.js 设计与实现》/" class="nav-link" aria-label="《Vue.js 设计与实现》"><!---->《Vue.js 设计与实现》<!----></a></li><li class="dropdown-item"><a href="/doc/readbook/《TypeScript 编程》/" class="nav-link" aria-label="《TypeScript 编程》"><!---->《TypeScript 编程》<!----></a></li></ul></button></div></div></nav><!--[--><!----><!--]--></div><div class="navbar-right"><!--[--><!----><!--]--><div class="nav-item hide-in-mobile"><button id="appearance-switch"><svg xmlns="http://www.w3.org/2000/svg" class="icon auto-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="auto icon" style="display:block;"><path d="M512 992C246.92 992 32 777.08 32 512S246.92 32 512 32s480 214.92 480 480-214.92 480-480 480zm0-840c-198.78 0-360 161.22-360 360 0 198.84 161.22 360 360 360s360-161.16 360-360c0-198.78-161.22-360-360-360zm0 660V212c165.72 0 300 134.34 300 300 0 165.72-134.28 300-300 300z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon dark-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="dark icon" style="display:none;"><path d="M524.8 938.667h-4.267a439.893 439.893 0 0 1-313.173-134.4 446.293 446.293 0 0 1-11.093-597.334A432.213 432.213 0 0 1 366.933 90.027a42.667 42.667 0 0 1 45.227 9.386 42.667 42.667 0 0 1 10.24 42.667 358.4 358.4 0 0 0 82.773 375.893 361.387 361.387 0 0 0 376.747 82.774 42.667 42.667 0 0 1 54.187 55.04 433.493 433.493 0 0 1-99.84 154.88 438.613 438.613 0 0 1-311.467 128z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" class="icon light-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="light icon" style="display:none;"><path d="M952 552h-80a40 40 0 0 1 0-80h80a40 40 0 0 1 0 80zM801.88 280.08a41 41 0 0 1-57.96-57.96l57.96-58a41.04 41.04 0 0 1 58 58l-58 57.96zM512 752a240 240 0 1 1 0-480 240 240 0 0 1 0 480zm0-560a40 40 0 0 1-40-40V72a40 40 0 0 1 80 0v80a40 40 0 0 1-40 40zm-289.88 88.08-58-57.96a41.04 41.04 0 0 1 58-58l57.96 58a41 41 0 0 1-57.96 57.96zM192 512a40 40 0 0 1-40 40H72a40 40 0 0 1 0-80h80a40 40 0 0 1 40 40zm30.12 231.92a41 41 0 0 1 57.96 57.96l-57.96 58a41.04 41.04 0 0 1-58-58l58-57.96zM512 832a40 40 0 0 1 40 40v80a40 40 0 0 1-80 0v-80a40 40 0 0 1 40-40zm289.88-88.08 58 57.96a41.04 41.04 0 0 1-58 58l-57.96-58a41 41 0 0 1 57.96-57.96z"></path></svg></button></div><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form><!--[--><!----><!--]--><button class="toggle-navbar-button" aria-label="Toggle Navbar" aria-expanded="false" aria-controls="nav-screen"><span class="button-container"><span class="button-top"></span><span class="button-middle"></span><span class="button-bottom"></span></span></button></div></header><!----><!--]--><!----><div class="toggle-sidebar-wrapper"><span class="arrow left"></span></div><aside class="sidebar"><!--[--><!----><!--]--><ul class="sidebar-links"><li><section class="sidebar-group"><button class="sidebar-heading clickable active"><!----><span class="title">《TypeScript 编程》</span><span class="arrow down"></span></button><ul class="sidebar-links"><li><!--[--><a href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%201%20%E7%AB%A0%20%E5%AF%BC%E8%A8%80.html" class="nav-link sidebar-link sidebar-page" aria-label="第 1 章 导言"><!---->第 1 章 导言<!----></a><ul class="sidebar-sub-headers"></ul><!--]--></li><li><!--[--><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html" class="router-link-active router-link-exact-active nav-link active sidebar-link sidebar-page active" aria-label="第 2 章 TypeScript 概述"><!---->第 2 章 TypeScript 概述<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-1-编译器" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="2.1 编译器"><!---->2.1 编译器<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-2-类型系统" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="2.2 类型系统"><!---->2.2 类型系统<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#ts-vs-js" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="TS vs JS"><!---->TS vs JS<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-3-代码编辑器设置" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="2.3 代码编辑器设置"><!---->2.3 代码编辑器设置<!----></a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-3-1-tsconfig-json" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="2.3.1 tsconfig.json"><!---->2.3.1 tsconfig.json<!----></a><ul class="sidebar-sub-headers"></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-3-2-tslint-json" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="2.3.2 tslint.json"><!---->2.3.2 tslint.json<!----></a><ul class="sidebar-sub-headers"></ul></li></ul></li><li class="sidebar-sub-header"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-4-index-ts" class="router-link-active router-link-exact-active nav-link sidebar-link heading" aria-label="2.4 index.ts"><!---->2.4 index.ts<!----></a><ul class="sidebar-sub-headers"></ul></li></ul><!--]--></li><li><!--[--><a href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%203%20%E7%AB%A0%20%E7%B1%BB%E5%9E%8B%E5%85%A8%E8%A7%A3.html" class="nav-link sidebar-link sidebar-page" aria-label="第 3 章 类型全解"><!---->第 3 章 类型全解<!----></a><ul class="sidebar-sub-headers"></ul><!--]--></li><li><!--[--><a href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%204%20%E7%AB%A0%20%E5%87%BD%E6%95%B0.html" class="nav-link sidebar-link sidebar-page" aria-label="第 4 章 函数"><!---->第 4 章 函数<!----></a><ul class="sidebar-sub-headers"></ul><!--]--></li><li><!--[--><a href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%205%20%E7%AB%A0%20%E7%B1%BB%E5%92%8C%E6%8E%A5%E5%8F%A3.html" class="nav-link sidebar-link sidebar-page" aria-label="第 5 章 类和接口"><!---->第 5 章 类和接口<!----></a><ul class="sidebar-sub-headers"></ul><!--]--></li><li><!--[--><a href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%206%20%E7%AB%A0%20%E7%B1%BB%E5%9E%8B%E8%BF%9B%E9%98%B6.html" class="nav-link sidebar-link sidebar-page" aria-label="第 6 章 类型进阶"><!---->第 6 章 类型进阶<!----></a><ul class="sidebar-sub-headers"></ul><!--]--></li></ul></section></li><li><section class="sidebar-group"><button class="sidebar-heading clickable"><!----><span class="title">《Vue.js 设计与实现》</span><span class="arrow right"></span></button><!----></section></li></ul><!--[--><!----><!--]--></aside><!--[--><main class="page" id="main-content"><!--[--><!----><nav class="breadcrumb disable"></nav><div class="page-title"><h1><!---->第 2 章 TypeScript 概述</h1><div class="page-info"><!----><!----><!----><!----><!----><span class="reading-time-info" aria-label="阅读时间⌛" data-balloon-pos="down"><svg xmlns="http://www.w3.org/2000/svg" class="icon timer-icon" viewBox="0 0 1024 1024" fill="currentColor" aria-label="timer icon"><path d="M799.387 122.15c4.402-2.978 7.38-7.897 7.38-13.463v-1.165c0-8.933-7.38-16.312-16.312-16.312H256.33c-8.933 0-16.311 7.38-16.311 16.312v1.165c0 5.825 2.977 10.874 7.637 13.592 4.143 194.44 97.22 354.963 220.201 392.763-122.204 37.542-214.893 196.511-220.2 389.397-4.661 5.049-7.638 11.651-7.638 19.03v5.825h566.49v-5.825c0-7.379-2.849-13.981-7.509-18.9-5.049-193.016-97.867-351.985-220.2-389.527 123.24-37.67 216.446-198.453 220.588-392.892zM531.16 450.445v352.632c117.674 1.553 211.787 40.778 211.787 88.676H304.097c0-48.286 95.149-87.382 213.728-88.676V450.445c-93.077-3.107-167.901-81.297-167.901-177.093 0-8.803 6.99-15.793 15.793-15.793 8.803 0 15.794 6.99 15.794 15.793 0 80.261 63.69 145.635 142.01 145.635s142.011-65.374 142.011-145.635c0-8.803 6.99-15.793 15.794-15.793s15.793 6.99 15.793 15.793c0 95.019-73.789 172.82-165.96 177.093z"></path></svg><span>大约 6 分钟</span><meta property="timeRequired" content="PT6M"></span></div><hr></div><div class="toc-place-holder"><aside id="toc"><div class="toc-header">此页内容</div><div class="toc-wrapper"><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-1-编译器" class="router-link-active router-link-exact-active toc-link level2">2.1 编译器</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-2-类型系统" class="router-link-active router-link-exact-active toc-link level2">2.2 类型系统</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#ts-vs-js" class="router-link-active router-link-exact-active toc-link level3">TS vs JS</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-3-代码编辑器设置" class="router-link-active router-link-exact-active toc-link level2">2.3 代码编辑器设置</a></li><ul class="toc-list"><!--[--><li class="toc-item"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-3-1-tsconfig-json" class="router-link-active router-link-exact-active toc-link level3">2.3.1 tsconfig.json</a></li><!----><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-3-2-tslint-json" class="router-link-active router-link-exact-active toc-link level3">2.3.2 tslint.json</a></li><!----><!--]--></ul><!--]--><!--[--><li class="toc-item"><a aria-current="page" href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%202%20%E7%AB%A0%20TypeScript%20%E6%A6%82%E8%BF%B0.html#_2-4-index-ts" class="router-link-active router-link-exact-active toc-link level2">2.4 index.ts</a></li><!----><!--]--></ul></div></aside></div><!----><div class="theme-hope-content"><h1 id="第-2-章-typescript-概述" tabindex="-1"><a class="header-anchor" href="#第-2-章-typescript-概述" aria-hidden="true">#</a> 第 2 章 TypeScript 概述</h1><h2 id="_2-1-编译器" tabindex="-1"><a class="header-anchor" href="#_2-1-编译器" aria-hidden="true">#</a> 2.1 编译器</h2><p>程序是由一些文件构成，文件中是编写的文本。这些文本由一个特殊的程序（<strong>编译器</strong>）解析，转换成抽象语法树（abstract syntax tree,AST）。 <strong>AST 是去掉空白、注释和缩进用的制表符或空格之后的数据结构。</strong> 编译器把 AST 转换成一种称为 <strong>字节码（bytecode）</strong> 的低层表示。 字节码再传给运行时程序计算，得到最终结果。也就是说，运行程序就是让运行时计算由编译器从源码解析得来的 AST 生成的字节码。不同语言细节有所不同，但是大致如此。</p><p>步骤如下：</p><ol><li>把程序解析成 AST</li><li>编译器把 AST 编译成字节码</li><li>运行时计算字节码</li></ol><p>TS 的特殊之处在于，他不直接编译成字节码，而是先编译成 JS 代码。然后在浏览器或 Node.js 运行得到的 JS 代码。</p><p>TS 编译器生成 AST <strong>之后</strong>，真正运行代码<strong>之前</strong>，TS 会对代码做类型检查。</p><blockquote><p>类型检查器：检查代码是否符合类型安全要求的特殊程序。</p><p>类型检查器是 TS 的重要组成部分。</p></blockquote><p>加入类型检查和运行 JS，TS 的运行过程大致如下：</p><table><thead><tr><th></th><th>运行过程</th></tr></thead><tbody><tr><td>TS</td><td>1. TS 源码转为 TS 抽象语法树（<strong>AST</strong>）<br> 2. 类型检查器检查 AST <br> 3. TS AST 编译为 JS 源码</td></tr><tr><td>JS</td><td>4. JS 源码转变为 JS AST <br> 5. JS AST 编译为字节码 <br> 6. 运行时计算字节码</td></tr></tbody></table><div class="custom-container tip"><p class="custom-container-title">提示</p><p>JS 编译器和运行时通常聚在一个称为引擎的过程中。一般都是与引擎交互的。V8（驱动 Node.js 、Chrome、Opera）的引擎、 SpiderMonkey（Firefox）、JSCore（Safari）和 Chakra（Edge）。</p></div><p>上述过程中，第 1~2 步使用程序的类型，第三步不使用。TSC 把 TS 编译成 JS 时不会考虑类型，意味着，程序中的类型对程序生成的输出没有任何影响， 类型只在类型检查这一步使用。这个特性确保可以随意改动、更新和改进程序中的类型，而无需担心会破坏应用功能。</p><h2 id="_2-2-类型系统" tabindex="-1"><a class="header-anchor" href="#_2-2-类型系统" aria-hidden="true">#</a> 2.2 类型系统</h2><blockquote><p>类型系统：类型检查器为程序分配类型是使用的一系列规则</p></blockquote><p>一般来说类型系统有两种：一种通过显示句法告诉编译器所有值得类型，另一种自动推导值得类型。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不同语言采用不同的类型系统，JavaScript、Python 和 Ruby 在运行时推导类型；Haskell 和 OCaml 在编译时推导和检查类型；Scala 和 TypeScript 要求显示声明部分类型，然后在编译时推导和检查剩余部分类型；Java 和 C 几乎需要显示注解所有类型，然后在编译时检查。</p></div><p>TS 具有两种类型系统，可以显示注解类型，也可以让 TS 推导多数类型。</p><p>为了显示告知 TS 使用的是什么类型，需要使用注解。形式为 <em>value:type</em></p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">let</span> a<span class="token operator">:</span><span class="token builtin">number</span> <span class="token operator">=</span> <span class="token number">1</span> <span class="token comment">// a 是一个数字</span>
<span class="token keyword">let</span> b<span class="token operator">:</span><span class="token builtin">string</span> <span class="token operator">=</span> <span class="token string">&#39;1&#39;</span> <span class="token comment">// b 是一个字符串</span>
<span class="token keyword">let</span> c<span class="token operator">:</span><span class="token builtin">boolean</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token boolean">false</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">]</span> <span class="token comment">// c 是一个布尔值数组</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果想让 TS 推导类型，去掉类型注解即可。</p><div class="custom-container info"><p class="custom-container-title">相关信息</p><p>一般来说，最好让 TS 推导类型，少数情况下才显示注解。</p></div><h3 id="ts-vs-js" tabindex="-1"><a class="header-anchor" href="#ts-vs-js" aria-hidden="true">#</a> TS vs JS</h3><table><thead><tr><th>类型系统特性</th><th>JavaScript</th><th>TypeScript</th></tr></thead><tbody><tr><td>类型是如何绑定的？</td><td>动态</td><td>静态</td></tr><tr><td>是否自动转换类型？</td><td>是</td><td>否（多数时候）</td></tr><tr><td>何时检查类型？</td><td>运行时</td><td>编译时</td></tr><tr><td>何时报告错误？</td><td>运行时（多数时候）</td><td>编译时（多数时候）</td></tr></tbody></table><h4 id="类型是如何绑定的" tabindex="-1"><a class="header-anchor" href="#类型是如何绑定的" aria-hidden="true">#</a> 类型是如何绑定的</h4><p>JS 动态绑定类型，因此必须在运行程序才能知道类型。在运行程序之前对类型一无所知。</p><p>TS 是渐进式类型语言。意味着，在编译时知道所有类型能让 TS 充分发挥作用，但在编译程序之前，并不需要知道全部类型。 即便是没有类型的程序，TS 也能推导出部分类型，捕获部分错误。</p><p>渐进式类型语言特别便于把没有类型的 JS 代码基迁移到具有类型的 TS。</p><h4 id="是否自动转换类型" tabindex="-1"><a class="header-anchor" href="#是否自动转换类型" aria-hidden="true">#</a> 是否自动转换类型</h4><p>JS 是弱类型语言，如果执行无效操作，JS 会根据规则将类型自动转换，TS 则不会。</p><h4 id="何时检查类型" tabindex="-1"><a class="header-anchor" href="#何时检查类型" aria-hidden="true">#</a> 何时检查类型</h4><p>多数情况下，JS 不在乎使用的类型，会按照规则把提供的值转换成预期类型。</p><p>TS 会在编译时对代码做类型检查，</p><h4 id="何时报告错误" tabindex="-1"><a class="header-anchor" href="#何时报告错误" aria-hidden="true">#</a> 何时报告错误</h4><p>JS 在运行时抛出异常或执行隐式类型转换。意味着必须真正运行程序才能知道操作是否有效。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>JS 在解析程序之后、运行程序之前报告语法错误和部分缺陷。</p></div><p>TS 在编译时报告句法错误和类型相关错误。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>渐进编译式语言在小修改后可以快速重新编译，而不用重新编译整个程序。</p></div><h2 id="_2-3-代码编辑器设置" tabindex="-1"><a class="header-anchor" href="#_2-3-代码编辑器设置" aria-hidden="true">#</a> 2.3 代码编辑器设置</h2><p>TSC（自托管编译器或自编译型编译器） 是使用 TS 编写的命令号应用，需要通过 NodeJs 运行。使用 NPM 安装 TSC 和 TSLint（TypeScript linter）。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code># 新建文件夹
mkdir chapter
cd chapter

# 初始化项目
pnpm init

# 安装 TSC、TSLint、NodeJs
pnpm add -S typescript tslint @types/node
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-3-1-tsconfig-json" tabindex="-1"><a class="header-anchor" href="#_2-3-1-tsconfig-json" aria-hidden="true">#</a> 2.3.1 tsconfig.json</h3><p>tsconfig.json 文件中定义要编译那些文件、把文件编译到哪个目录中，以及使用哪个版本 JS 运行。可使用 <code>tsc --init</code> 初始化 tsconfig.json 文件。</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token comment">// tsconfig.json</span>
<span class="token punctuation">{</span>
    <span class="token property">&quot;compilerOptions&quot;</span><span class="token operator">:</span><span class="token punctuation">{</span>
        <span class="token property">&quot;lib&quot;</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">&quot;es2015&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token property">&quot;module&quot;</span><span class="token operator">:</span><span class="token string">&quot;commonjs&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;outDir&quot;</span><span class="token operator">:</span><span class="token string">&quot;dist&quot;</span><span class="token punctuation">,</span>
        <span class="token property">&quot;sourceMap&quot;</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token property">&quot;strict&quot;</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token property">&quot;target&quot;</span><span class="token operator">:</span><span class="token string">&quot;es2015&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token property">&quot;include&quot;</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">&quot;src&quot;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><table><thead><tr><th>选项</th><th>说明</th></tr></thead><tbody><tr><td>include</td><td>TSC 在哪个文件中寻找 TS 文件</td></tr><tr><td>lib</td><td>TSC 假定运行代码环境中有哪些 API?包括 ES5 的 Function.prototype.bind、ES2015 的 Object.assign 和 DOM 得 document.querySelector</td></tr><tr><td>module</td><td>TSC 把代码编译成哪个模块系统（CommonJS、SystemJS、ES2015）等</td></tr><tr><td>outDir</td><td>TSC 把编译好的 JS 代码放到哪个文件夹</td></tr><tr><td>strict</td><td>检查无效代码时尽量严格。该选项强制所有代码都正确声明类型。</td></tr><tr><td>target</td><td>TSC 把代码编译成哪个 JS 版本（ES3、ES5、ES2015、ES2016）等</td></tr></tbody></table><p>上表这是部分选项，根据实际开发需求做出相应改动。编写在浏览器中运行的 TS 时在 lib 中添加 &quot;dom&quot;，或者把现有的 JS 代码迁移到 TS 时调整 strict 级别。 <a href="https://www.tslang.cn/docs/handbook/tsconfig-json.html" target="_blank" rel="noopener noreferrer">配置教程<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><p>使用 tsconfig.json 文件配置 TSC，TSC 很多选项可以通过命令行进行设置。使用 <code>tsc --help</code> 查看。</p><h3 id="_2-3-2-tslint-json" tabindex="-1"><a class="header-anchor" href="#_2-3-2-tslint-json" aria-hidden="true">#</a> 2.3.2 tslint.json</h3><p>tslint.json 文件保存 TSLint 配置，约束代码格式。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>TSLint 不是必用的工具，建议使用，保证编程风格一致。</p></div><p>可以使用 <code>tslint --init</code> 生成默认配置文件</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
    <span class="token property">&quot;defaultSeverity&quot;</span><span class="token operator">:</span> <span class="token string">&quot;error&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;extends&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">&quot;tslint:recommended&quot;</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token property">&quot;jsRules&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token property">&quot;rules&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token property">&quot;rulesDirectory&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-4-index-ts" tabindex="-1"><a class="header-anchor" href="#_2-4-index-ts" aria-hidden="true">#</a> 2.4 index.ts</h2><p>可以将 index.ts 作为项目的入口文件。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><ul><li>可以使用 ts-node，只需要一行命令便能编译和运行 TypeScript 文件</li><li>使用 typescript-node-starter 脚手架工具快速生成文件结构</li></ul></div></div><!----><footer class="page-meta"><!----><!----><!----></footer><nav class="page-nav"><a href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%201%20%E7%AB%A0%20%E5%AF%BC%E8%A8%80.html" class="nav-link prev" aria-label="第 1 章 导言"><div class="hint"><span class="arrow left"></span>上一页</div><div class="link"><!---->第 1 章 导言</div></a><a href="/doc/readbook/%E3%80%8ATypeScript%E7%BC%96%E7%A8%8B%E3%80%8B/%E7%AC%AC%203%20%E7%AB%A0%20%E7%B1%BB%E5%9E%8B%E5%85%A8%E8%A7%A3.html" class="nav-link next" aria-label="第 3 章 类型全解"><div class="hint">下一页<span class="arrow right"></span></div><div class="link">第 3 章 类型全解<!----></div></a></nav><!----><!----><!--]--></main><!--]--><!----><!--]--></div><!--]--><!----><!--]--></div>
    <script type="module" src="/doc/assets/app.41440b49.js" defer></script>
  </body>
</html>
